<template>
    <div class="recnewsong">
        <div class="hd">
           <el-divider content-position="left"><h2>最新音乐</h2></el-divider>
        </div>
        <div class="bd">
            <div class="item" v-for="(item,index) in newsong" :key="index" @click="playMusic(item)">
                <div class="item-img">
                    <img v-lazy="item.picUrl" alt=""/>
                    <div class="icon">
                        <span class="iconfont icon-play1"></span>
                    </div>
                </div>
                <div class="item-text">
                    <p>{{item.name}}</p>
                    <p>{{item.song.artists[0].name}}</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:'',
    props:{
        newsong:{
            type:Array,
            default(){
                return []
            }
        }
    },
    data() {
        return {      
        }
    },
    methods:{
        // 播放音乐方法
        async playMusic(item){
            // 获取歌曲是否可以播放
            let isCheck = await this.$API.playmusic.checkMusic(item.id);
            if(isCheck.success){
                // 获取歌曲播放的url
                let songUrl =  await this.$API.playmusic.getSongUrl(item.id);
                if(songUrl.code == 200){
                    // 保存当前播放歌曲的url
                    this.$store.dispatch('saveSongUrl',songUrl.data[0].url)
                }
                // 获取歌曲的信息 
                // 获取这首歌的详细信息
                let songDetail = await  this.$API.songlistdetail.getEverySongDetail(item.id);
                if(songDetail.code == 200){
                    // 将当前播放歌曲的信息保存在仓库
                    this.$store.dispatch('saveSongDetail',songDetail.songs[0])
                    // 添加到播放列表
                    this.$store.dispatch('addPlayinglist',songDetail.songs[0])
                }
            }
            
        }
    },
    created(){     
    },
}
</script>
<style lang="less" scoped>
    .bd{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        .item{
            display: flex;
            align-items: center; 
            width: 33%;
            margin-top: 10px;
            &:hover{
                background: rgb(245, 245, 245, 0.3);
            }
            .item-img{
                position: relative;
                flex: 1;
                img{
                    width: 80px;
                    height: 80px;
                }
                .icon{
                    position: absolute;
                    top:0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    .iconfont{
                        font-size: 32px;
                        color: #fff;
                        cursor: pointer;
                        &:hover{
                            background: rgba(100, 100, 100, 0.7);
                            border-radius: 50%;
                        }

                    }
                }
            }
            .item-text{
                flex: 4;
                margin-left: 10px;
            }
        }
    }
   
</style>